<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if与v-show条件渲染</title>
</head>
<body>

<script src="/js/vue.js"></script>
<div id="app">
    <!-- v-if指令是根据表达式的值的属性来有条件地渲染元素 -->
    <p v-if="show">第一段文字</p>
    <!-- v-else接着v-if，如果v-if不满足，跳入到v-else，v-else为true -->
    <p v-else>第二段文字</p>
    <!-- v-else-if 接着v-if来使用，如果v-if不满足，则先跳入到v-else-if进行判断 -->
    <p v-if="score>=90">优秀</p>
    <p v-else-if="score>=80">良好</p>
    <p v-else-if="score>=70">中等</p>
    <p v-else-if="score>=60">合格</p>
    <p v-else>不合格</p>

    <!-- 用来判断是你是什么端，PC的游览器，苹果游览器 chrome,  -->

    <!-- v-show指令可以实现与v-if同样的效果。 -->
    <!-- 只有一次渲染我们用v-if，多次渲染频繁改变用v-show -->
    <p v-show="show">第一段文字</p>
</div>

<script>
    let app = new Vue({
        el:"#app",
        data:{ 
            msg:'hello world',
            show:true,
            score:90
        }
    })
</script> 
</body>
</html>